<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>微信好友列表</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../static/css/common.css" />
  </head>
  <body>
    <div class="flex">
      <div>
        <fieldset class="layui-elem-field layui-field-title ma-to-30">
          <legend>选择好友列表</legend>
        </fieldset>
        <div class="layui-upload-drag" id="friendList">
          <i class="layui-icon"></i>
          <p>点击上传，或将文件拖拽到此处</p>
          <div class="friendList"></div>
        </div>
      </div>
      <div class="layui-form" lay-filter="checkboxGroup">
        <fieldset class="layui-elem-field layui-field-title ma-to-30">
          <legend>选择操作的文件</legend>
        </fieldset>

        <div class="layui-form-item">
          <label class="layui-form-label">好友列表</label>
          <div class="layui-input-block" id="friend-list-checkbox"></div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-inline margin-left-30" id="friend-list-checkbox">
            <button type="button" class="layui-btn layui-btn-warm" id="checkouttBtn">开始解析</button>
          </div>
        </div>
      </div>
    </div>
    <div class="ma-to-30">
      <div class="layui-form">
        <div class="layui-form-item">
          <label class="layui-form-label">分组筛选</label>
          <div class="layui-input-block">
            <div class="flex flex-sub-select">
              <select name="name-group" class="flex-sub" xm-select="name-group">
                <option value="A">分组A</option>
                <option value="B">分组B</option>
                <option value="C">分组C</option>
                <option value="D">分组D</option>
                <option value="E">分组E</option>
                <option value="F">分组F</option>
                <option value="G">分组G</option>
                <option value="H">分组H</option>
                <option value="I">分组I</option>
                <option value="J">分组J</option>
                <option value="K">分组K</option>
                <option value="L">分组L</option>
                <option value="M">分组M</option>
                <option value="N">分组N</option>
                <option value="O">分组O</option>
                <option value="P">分组P</option>
                <option value="Q">分组Q</option>
                <option value="R">分组R</option>
                <option value="S">分组S</option>
                <option value="T">分组T</option>
                <option value="U">分组U</option>
                <option value="V">分组V</option>
                <option value="W">分组W</option>
                <option value="X">分组X</option>
                <option value="Y">分组Y</option>
                <option value="Z">分组Z</option>
                <option value="#">分组#</option>
              </select>
              <button type="button" class="layui-btn layui-btn-warm" id="filterBtn">筛选</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <fieldset class="layui-elem-field layui-field-title ma-to-30">
      <legend>解析结果</legend>
    </fieldset>
    <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
  </body>
  <script src="../static/layui/layui.js" charset="utf-8"></script>
  <!-- formSelectsV4 -->
  <link rel="stylesheet" href="../static/layui/lay/lib/formSelects-v4/formSelects-v4.css" />
  <script src="../static/layui/lay/lib/formSelects-v4/formSelects-v4.min.js"></script>

  <script>
    let friendList = []
    layui
      .extend({
        formSelects: '../static/layui/lay/lib/formSelects-v4/formSelects-v4'
      })
      .use(['form', 'upload', 'table', 'formSelects'], function() {
        var upload = layui.upload,
          layer = layui.layer,
          $ = layui.jquery,
          table = layui.table,
          util = layui.util,
          form = layui.form,
          formSelects = layui.formSelects

        //执行
        util.fixbar()

        // 选择群聊文件
        upload.render({
          elem: '#friendList',
          auto: false,
          accept: 'file', //普通文件
          choose: function(obj) {
            var files = (this.files = obj.pushFile()) //将每次选择的文件追加到文件队列
            // 读取本地文件
            obj.preview(function(index, file, result) {
              let reader = new FileReader()
              reader.onload = event => {
                try {
                  friendList.push({
                    list: JSON.parse(event.target.result),
                    listName: file.name
                  })
                  $('#friend-list-checkbox').append(
                    `<input type="checkbox" name="friendList|${friendList.length -
                      1}" lay-skin="primary" title="${file.name}" value="1" checked="" />`
                  )

                  form.render()
                } catch (e) {
                  throw new Error(e)
                }
                input = null
              }
              reader.readAsText(files[index])
            })
          }
        })

        /**
         * 解析为表格数据
         */
        $('#checkouttBtn,#filterBtn').on('click', function() {
          //获取表单区域所有值
          var checkboxGroup = form.val('checkboxGroup')
          var verify = []
          Object.keys(checkboxGroup).forEach(item => {
            let itemArr = item.split('|')
            verify.push(...friendList[itemArr[1]].list)
          })

          if (verify.length === 0) {
            layer.msg('请选择好友列表')
            return false
          }

          let filterGroup = formSelects.value('name-group', 'val')

          let renderData = window.parent.friendSort(verify)

          // 筛选分组
          if (filterGroup && filterGroup.length > 0) {
            renderData = renderData.filter(item => filterGroup.indexOf(item.firstChat) !== -1)
          }

          layer.msg('读取成功！')

          table.render({
            elem: '#LAY_table_user',
            id: '#LAY_table_user',
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            data: renderData,
            page: true, //开启分页
            defaultToolbar: ['filter', 'exports', 'print'],
            limits: [10, 20, 30, 40, 50, 60, 70, 80, renderData.length],
            cols: [
              [
                { type: 'numbers' },
                { type: 'checkbox' },
                { sort: true, field: 'firstChat', title: '分组', width: 100 },
                { sort: true, field: 'head_img', title: '头像', templet: '#avatar', width: 120 },
                // { sort: true, field: 'key', title: '缩写' },
                // { sort: true, field: 'pyFullName', title: 'pyFullName' },
                // { sort: true, field: 'resultName', title: 'resultName' },
                { sort: true, field: 'nick_name', title: '微信昵称' },
                { sort: true, field: 'remark_name', title: '备注名称' },
                { sort: true, field: 'user_name', title: '微信号' },
                { sort: true, field: 'wxid', title: '微信ID' }
              ]
            ]
          })

          //头工具栏事件
          table.on('toolbar(user)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id)
            switch (obj.event) {
              case 'getCheckData':
                let data = checkStatus.data
                if (data.length === 0) {
                  layer.msg('请选择需要导出的内容')
                } else {
                  let link = document.createElement('a')
                  link.download = '导出的数据.json'
                  link.href = 'data:text/plain,' + JSON.stringify(data)
                  link.click()
                }
                break
            }
          })
        })
      })
  </script>

  <script type="text/html" id="avatar">
    <img style="width:50px;height:50px;" src="{{d.head_img}}">
  </script>

  <script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
      <button class="layui-btn layui-btn-sm" lay-event="getCheckData">导出选中的数据</button>
    </div>
  </script>
</html>
